<template>
  <div class="history-box">
    <div class="history-top">
      <div class="history-top-title">历史调度</div>
      <div class="history-top-tip">
        <InfoCircleFilled :style="{color: '#0062AD', paddingTop: '10px'}"/>
        <span class="tip-text">该货船已经优化 <span :style="{color: '#FA6400'}">{{data.length}}</span> 次</span>
      </div>
    </div>
    <div class="history-body">
      <div class="history-ul">
        <div @click="changeLi(item)"
             :class="{'history-li': true,'history-active': activeKey === item.id}"
             :key="item.id" v-for="item in data">
          <div class="li-title">
            <div class="li-title-name"> <div class="li-now" v-if="item.isNow">当前调度</div>V-{{item.schemeInfo.number}}</div>
            <span :class="{
              'li-type-1': item.type === '0',
              'li-type-2': item.type === '1'
            }">{{item.type === '0'? '提交失败' : '提交成功'}}</span>
          </div>
          <div class="li-time">{{item.schemeInfo.createDate}}</div>
        </div>
      </div>
      <div class="history-right">
        <div class="history-gantt-box">
          <div class="gantt-box-flex">
            <div class="gantt-header">
              <div class="gantt-title">
                <span>船货排布</span>
              </div>
              <!--              <div class="gantt-btn">-->
              <!--                <a-button type="text"> <template #icon><SaveOutlined /></template>保存</a-button>-->
              <!--                <a-divider type="vertical" />-->
              <!--                <a-button type="text"> <template #icon><ShareAltOutlined /></template>分享</a-button>-->
              <!--                <a-divider type="vertical" />-->
              <!--                <a-button type="text">  <template #icon><SendOutlined /></template>发布</a-button>-->
              <!--              </div>-->
            </div>
            <HightChartsScheme  ref="gantt"
                                :isRedraw="isRedraw"
                                :firstShipLoadingTime="firstShipLoadingTime"
                                :scaleUnit="scaleUnit"
                                :ganttConfig="ganttConfig"
                                @changeVal="onChangeDate"
            />
          </div>
        </div>
        <div class="details-item details-left">
          <div class="left-title">效能度量</div>
          <div class="details-left-body">
            <div class="left-item">
              <div class="left-text">
                <span>运费：</span>
                <span>{{activeObj.freight}}</span>
              </div>
              <div class="left-text">
                <span>时间：</span>
                <span>{{activeObj.day}}</span>
              </div>
              <div class="left-text">
                <span>贸易利润率：</span>
                <span>{{activeObj.trade}}</span>
              </div>
              <div class="left-text">
                <span>船舶利润率：</span>
                <span>{{activeObj.ship}}</span>
              </div>
            </div>
          </div>
        </div>
        <!--        <div class="history-bottom">-->
        <!--          <a-button class="return-btn" @click="goReturn">-->
        <!--            <template #icon>-->
        <!--              <UndoOutlined />-->
        <!--            </template>-->
        <!--            恢复版本-->
        <!--          </a-button>-->
        <!--        </div>-->

      </div>
    </div>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, watch} from 'vue';
import { InfoCircleFilled} from '@ant-design/icons-vue';
import HightChartsScheme from '../ArrangementGantt/HightChartsScheme.vue'
import { useRouter, useRoute } from 'vue-router';
import dayjs from "dayjs";
const { proxy  } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const activeKey = ref('1')
const isRedraw = ref(1)
const firstShipLoadingTime = ref('')
watch(() => isRedraw.value, (newVal) => {
  isRedraw.value = newVal
}, {
  deep: true
})
const activeObj = ref({
  freight: '',
  day: '',
  trade: '',
  ship: '',
})
const changeLi = (item) => {
  activeKey.value = item.schemeInfo.id.toString()
  activeObj.value = item.schemeInfo
  isRedraw.value++
  getLastData(item)
}
// 贸易类型
const areas = ref([
  {
    label: '长协',
    value: 1
  },
  {
    label: '中期',
    value: 2
  },
  {
    label: '现货',
    value: 3
  }
])
// 贸易主体
const tradeareas = ref([
  {
    label: '国贸',
    value: 1
  },
  {
    label: '新贸',
    value: 2
  },
])
const ganttConfig = ref({
  // 数据源
  data: [],
  // 左侧表格列配置
  tableConfig: [],
})
const getLastData = (val) => {
  ganttConfig.value.tableConfig = []
  ganttConfig.value.data = []
  if (val) {
    firstShipLoadingTime.value = val.firstShipLoadingTime?val.firstShipLoadingTime : Date.now()
    let shipData = val.shipNames
    shipData.map((item, index) => {
      ganttConfig.value.tableConfig.push(item.shipName)
      if (item.details.length > 0 && item.details) {
        item.details.map(child => {
          ganttConfig.value.data.push(Object.assign({}, child, {
            createBy: localStorage.getItem('userName'),
            id: child.id.toString(),
            shipContractId: child.shipContractId? child.shipContractId.toString() : null,
            y: index,
            color: colorFn(Number(child.executeStatus)),
            tradeTypeLabel: tradeTypeFn(child.tradeType),
            tradeBodyLabel: tradeBodyFn(child.tradeBody),
            shipTradeBodyLabel: tradeBodyFn(child.shipTradeBody),
            sellerTradeBodyLabel: tradeBodyFn(child.sellerTradeBody),
            shipRouteLabel: shipRouteFn(child.shipRoute),
            schemeId: child.schemeId.toString(),
            resourceContract: child.resourceContract? child.resourceContract.toString() : '',
            sellerResourceContract: child.sellerResourceContract? child.sellerResourceContract.toString() : '',
            completed: child.expectedFullLoadVoyageDays / (child.expectedFullLoadVoyageDays + child.expectedEmptyLoadVoyageDays),
            draggable: true,
            start: dayjs(child.expectedLoadingDate).valueOf(),
            end: dayjs(child.expectedEmptyReturnWindow).valueOf(),
          }))
        })
      }
    })
  }
  isRedraw.value++
  console.log('甘特图数据', ganttConfig.value)
}
/**
 * 颜色切换
 * */
const colorFn = (i) => {
  // 未下发 #165DFF  已下发(船货排布) 38E9FDA3  执行中（已排布）#FF7D00 已完成 #00B42A 已终止 #9EA0A8A3
  const colors = ['rgba(149,26,230,0.64)',  'rgba(56,233,253,0.64)', 'rgba(0,40,243,0.64)', 'rgba(233,0,26,0.64)', 'rgba(158,160,168,0.64)']
  return colors[i]
}
// 航线
const AirOptions = ref([
  {
    label: '巴拿马运河',
    value:1
  },
  {
    label: '好望角海峡',
    value:2
  },
  {
    label: '苏伊士运河',
    value:3
  }
])
/**
 * 航线赋值
 * */
const shipRouteFn = (val) => {
  let lastVal = []
  console.log('航线的值', val)
  if (val) {
    if (Array.isArray(val)) {
      return  val.join(',')
    } else {
      let newVal = val.split(',')
      if (newVal.length > 0 && Array.isArray(newVal)) {
        newVal.map(item => {
          AirOptions.value.map(rVal => {
            if (Number(item) === rVal.value) {
              lastVal.push(rVal.label)
            }
          })
        })
      }
      return lastVal.join(',')
    }
  }  else {
    return  lastVal
  }
}
/**
 * 贸易主体赋值
 * */
const tradeBodyFn = (val) => {
  let lastVal = ''
  tradeareas.value.map(item => {
    if (item.value === val) {
      lastVal = item.label
    }
  })
  return lastVal
}
/**
 * 贸易类型赋值
 * */
const tradeTypeFn = (val) => {
  let lastVal = ''
  areas.value.map(item => {
    if (item.value === val) {
      lastVal = item.label
    }
  })
  return lastVal
}
const data = ref([])
const getList = () => {
  proxy.$api.postScheduilingHistory({year: null, planId: route.query.planId}).then(res => {
    data.value = res.resultObject
    data.value.map((item, index) => {
      Object.assign(item, {
        id: item.schemeInfo.id.toString(),
        isNow: index === 0? true : false
      })
    })
    console.log('历史调度数据', data.value)
    if (data.value.length > 0) {
      activeObj.value = data.value[0]
      getLastData(activeObj.value)
    }
  })
}
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.history-box{
  background: #ffffff;
}
.history-top {
  height: 85px;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #F7F8FA;
  .history-top-title {
    font-size: 28px;
    font-weight: bold;
    text-align: left;
    color: #2c3749;
    line-height: 85px;
    margin-left: 20px;
  }
  .history-top-tip {
    width: 225px;
    height: 32px;
    background: #f7f8fa;
    border-radius: 3px;
    margin-top: 28px;
    margin-left: 60px;
    .tip-text {
      padding-left: 20px;
    }
  }
}
.history-body {
  display: flex;
  width: 100%;
  .history-ul {
    padding: 24px 14px;
    .history-li{
      width: 368px;
      height: 86px;
      background: #ffffff;
      border-bottom: 1px solid #DCDEE0;
      padding: 16px 24px 16px 5px;
      .li-title {
        display: flex;
        justify-content: space-between;
        .li-title-name {
          display: flex;
          font-size: 16px;
          font-weight: bold;
          text-align: left;
          color: #2c3749;
          line-height: 22px;
          letter-spacing: 0.02px;
          .li-now {
            width: 60px;
            height: 20px;
            background: rgba(0, 98, 173, 0.08);
            border-radius: 2px;
            color: #0062AD;
            font-size: 12px;
            text-align: center;
            margin-right: 8px;
          }
        }
        .li-type-1 {
          color: #F5001D;
          font-size: 14px;
        }
        .li-type-2 {
          color: #0062AD;
          font-size: 14px;
        }
      }
      .li-time {
        color: #999999;
        font-size: 14px;
        text-align: left;
        margin-top: 5px;
      }
    }
    .history-active {
      width: 368px;
      height: 86px;
      background: #F7F8FA;
      border-radius: 3px;
    }
  }
  .history-right{
    width:calc(100% - 400px);
    border-left: 1px solid #F7F8FA;
    padding-right: 2%;
    .history-bottom {
      width: 100px;
      margin-left: 24px;
      margin-bottom: 24px;
      .return-btn {
        background: #f7f9fa;
        border: 1px solid #dcdee0;
        border-radius: 2px;
      }
    }

  }
}
.gantt-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #F7F8FA;
  .gantt-title {
    font-weight: bold;
    font-size: 24px;
    //position: relative;
    //left: 1%;
    line-height: 70px;
    margin: 0 16px;
    text-align: left;
    span {
      padding-left: 16px;
    }
  }
  .moth-flex {
    display: flex;
    //position: relative;
    //left: 40%;
    padding: 20px;
    .month-item-btn {
      width: 80px;
      height: 30px;
      border: 1px solid #dcdee0;
      border-radius: 0px 3px 3px 0px;
      line-height: 30px;
      &:active {
        background: rgba(245,0,29,0.05);
        border: 1px solid #f5001d;
        color: #f5001d;
      }
      &:last-child{
        margin-left: 75px;
      }
    }
  }
}
.details-item {
  width: 98%;
  border: 1px solid #dcdee0;
  margin: 24px;
  padding: 16px 24px;
}
.details-left {
  .left-title {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #2c3749;
    line-height: 28px;
  }
  .details-left-body {
    width: 100%;
    display: flex;
    .left-item-radar {
      width: 60%;
      height: 250px;
    }
    .left-item {
      width: 100%;
      border-radius: 4px;
      padding: 0 16px;
      display: flex;
      .left-text {
        font-size: 16px;
        color: #2C3749;
        height: 60px;
        line-height: 60px;
        text-align: left;
        margin-right: 60px;
        span:first-child {
          color: #6B7A8B;
        }
      }
    }
  }
}
</style>
